
// box是轮播图盒子
// ul是图片盒子
// ol是圆点盒子
// left是左按钮
// right是右按钮
// 注意给box和ul加定位

// offsetWidth获得宽度


window.addEventListener('load', function () {
    // 获取盒子和左右按钮对象
    var left = document.querySelector('.screenshot-btn-left');
    var right = document.querySelector('.screenshot-btn-right');
    var box = document.querySelector('.screenshot-box');

    //获取大盒子宽度
    var boxwidth = box.offsetWidth - 50;


    //鼠标经过轮播图，左右按钮显示，并且清除自动播放
    box.addEventListener('mouseenter', function () {
        left.style.display = 'block';
        right.style.display = 'block';
        clearInterval(timer);
        timer = null;
    })

    //鼠标离开轮播图，左右按钮隐藏，并且自动点击右按钮，播放下一张
    box.addEventListener('mouseleave', function () {
        left.style.display = 'none';
        right.style.display = 'none';
        timer = setInterval(function () {
            //默认手动点击
            right.click();
        }, 2000);
    })

    // 获取图片和按钮对象
    var ul = box.querySelector('.screenshot-Carousel');


    //复制最后一个图片
    var first = ul.children[0].cloneNode(true);
    //把复制的图片放在最后面
    ul.appendChild(first);
    var num = 0;//控制图片
    var flag = true;//节流阀控制器(防止再播放时再次播放)

    right.addEventListener('click', function () {

        if (flag) {
            flag = false;
            //点击左键是图片整体向右移动
            //向右移，左边第一张就是最后一张图
            //无缝衔接,已经在最后一个图时,载点击下一个就重置到第一个位置,再滚动
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            //判断在累加前面,是为了让转换在滚动前面
            num++;

            //点击右侧按钮滚到下一个的图片
            animate(ul, -num * boxwidth, function () {
                flag = true;
            });

        }

    })





    left.addEventListener('click', function () {
        if (flag) {
            //节流阀
            flag = false;
            //点击左键是图片整体向右移动
            //向右移，左边第一张就是最后一张图
            //无缝衔接,已经在最后一个图时,载点击下一个就重置到第一个位置,再滚动
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = num + 'px';
            }
            //判断在累加前面,是为了让转换在滚动前面
            num--;

            //点击右侧按钮滚到下一个的图片
            animate(ul, -num * boxwidth, function () {
                flag = true;//运行完再开水龙头
            });
        }
    })




    var timer = setInterval(function () {
        //默认手动点击
        right.click();
    }, 2000);
})





